<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" align="center">
        <h2>包装业务管理系统</h2>
      </el-col>
    </el-row>
    <el-divider />
    <div style="width: 100%;margin: 0 auto;">
      <el-row>
        <el-col :xs="1" :sm="4"></el-col>
        <el-col :xs="22" :sm="8" :md="8" :lg="8" :xl="8">
          <el-row>
            <el-col :xs="12" :sm="12" v-for="(item, index) of listLeft">
              <button :class="'home-button app-left app-left-'+(index%2)"
                      @click="goTarget(item.link)">{{ item.text }}</button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xs="1" :sm="0"></el-col>
        <el-col :xs="1" :sm="0"></el-col>
        <el-col :xs="22" :sm="8" :md="8" :lg="8" :xl="8">
          <el-row>
            <el-col :xs="12" :sm="12" v-for="(item, index) of listRight">
              <button :class="'home-button app-right app-right-'+(index%2)"
                      @click="goTarget(item.link)">{{ item.text }}</button>
            </el-col>
            <el-col :xs="24" :sm="24">
              <button class="home-button app-right" style="margin-left: 10px;"
                      @click="goTarget('')">查询发货单</button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xs="1" :sm="4"></el-col>
      </el-row>
    </div>
    <el-divider />
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "4.6.0",
      listLeft: [
        { text: '设计', link: '' },
        { text: '业务订单', link: '/shengchan/dingdan' },
        { text: '拼版', link: '' },
        { text: '发排记录', link: '' },
        { text: '打样', link: '/shengchan/dayang' },
        { text: '拼版工艺单', link: '' },
        { text: '生产排单', link: '' },
        { text: '产品外协', link: '' },
        { text: '仓库材料', link: '' },
        { text: '成品发货', link: '' },
        { text: '外协返厂', link: '' },
        { text: '事故单', link: '' },
        { text: '应收账款', link: '' },
        { text: '应付账款', link: '' },
        { text: '成本分析', link: '' },
        { text: '计件工资', link: '' },
        { text: '费用开支', link: '' },
        { text: '资金管理', link: '' },
        { text: '参数设置', link: '/shengchan/canshu' },
        { text: '财务凭证', link: '' },
        { text: '供应商', link: '' },
        { text: '客户管理', link: '/shengchan/kehu' },
        { text: '电脑授权', link: '' },
        { text: '权限设置', link: '' }
      ],
      listRight: [
        { text: '生产排单', link: '' },
        { text: '配套产品明细', link: '' },
        { text: '久久算价', link: '' },
        { text: '外协明细', link: '' },
        { text: '备份数据', link: '' },
        { text: '查询删除记录', link: '' },
        { text: '条码采集计件', link: '' },
        { text: '查询审核记录', link: '' },
        { text: '制版完成', link: '' },
        { text: '计时工资', link: '' },
        { text: '样稿管理', link: '' },
        { text: 'CTP管理', link: '' },
        { text: '印刷机台', link: '' },
        { text: '条码采集查询', link: '' },
        { text: '条码采集审核备份查询', link: '' },
        { text: '应收账款(现结)', link: '' },
        { text: '处理外协单重复', link: '' },
        { text: 'CTP外协纠错', link: '' },
        { text: '参数设置条码', link: '' },
        { text: '线上数据查询', link: '' },
        { text: '线上数据下载', link: '' },
        { text: '线上转入数据查询', link: '' },
        { text: '订单交货统计', link: '' },
        { text: '线上转入数据查询', link: '' },
        { text: '录入厂价', link: '' },
        { text: '补录发货运费', link: '' }
      ]
    };
  },
  methods: {
    goTarget(href) {
      // window.open(href, "_blank");
      if (href) {
        window.location.href = href
      } else {
        this.$message.warning("未配置地址");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  .home-button {
    width: 98%;
    padding: 10px;
    margin-bottom: 4px;
  }
  .app-left {
    color: green;
    font-weight: bold;
    font-size: larger;
  }
  .app-right {
    width: 95%;
  }
  .app-left-1 {
    margin-right: 9px;
  }
  .app-right-0 {
    margin-left: 9px;
  }
}
</style>

